<template>
    <div class="app-container" style="background-color: #f8f8f8">
        <el-divider content-position="left"><span class="divider-css">▶患者信息◀</span></el-divider>
        <div class="patient-info-container">
          <el-form ref="formRef" :inline="true" :model="queryParams" class="mt10 mb10" label-width="80px">
          <!-- 第一行 -->
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item label="结算序号:">
                <el-input ref="hospitalNoInputRef" v-model="queryParams.feesNo" clearable
                          placeholder="请输入结算序号"
                          style="width: 200px"
                          @keyup.enter="feesNoSelectClick">
                  <template #append>
                    <el-button class="patient-button" type="primary"
                               @click="feesNoSelectClick">查询
                    </el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="患者姓名:">
                <div v-if="queryParams.visitId" style="width: 120px; flex: 1; ">
                              <span class="fz15 ml5" style="color: #5050e1">
                                {{
                                  queryParams.name
                                }}<svg-icon :icon-class="dictStore.getMateDictInfo(
                                  dictDataMap['sys_user_sex'],
                                  queryParams.sex
                                ).dictValue === '1'
                                  ? 'man'
                                  : 'woman'
                                  " style="margin-left: 10px"/>
                              </span>
                </div>
                <!--                    <el-link v-else style="width: 120px;" type="primary" @click="patientSelectClick">请选择患者-->
                <span v-else style="color:#f87f7f;margin-right: 25px;">暂无取消结算患者</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="身份证号:">
                        <span style="width: 100px">{{
                            queryParams.idNo ? queryParams.idNo : "暂无"
                          }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="年龄:">
                            <span v-if="queryParams.visitId" class="fz13" style="width: 150px">{{ queryParams.age }} 岁{{
                                queryParams.ageMonth
                              }} 月{{
                                queryParams.ageDay
                              }}天{{ queryParams.ageHours }}小时
                            </span>
                <span v-else style="width: 150px">暂无</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="联系电话:">
                        <span style="width: 100px">{{
                            queryParams.phone ? queryParams.phone : "暂无"
                          }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="住院次数:">
                       <span>{{
                           queryParams.hospitalizationNumber ? queryParams.hospitalizationNumber : "暂无"
                         }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item label="入院时间:">
                       <span style="width: 200px">{{
                           queryParams.admissionTime ? queryParams.admissionTime : "暂无"
                         }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="出院时间:">
                       <span>{{
                           queryParams.dischargeTime ? queryParams.dischargeTime : "暂无"
                         }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="住院科室:">
                            <span style="width: 100px">{{
                                queryParams.deptStayedName ? queryParams.deptStayedName : "暂无"
                              }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="入院诊断:">
                       <span style="width: 160px">{{
                           queryParams.diagnosis ? queryParams.diagnosis : "暂无"
                         }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="入院天数:">
                       <span class="ys-css" style="width: 140px">{{
                           queryParams.hospitalizationDays ? queryParams.hospitalizationDays + '天' :
                               "暂无"
                         }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        </div>

        <el-divider content-position="left"><span class="divider-css">▶费用信息◀</span></el-divider>
        <el-row :gutter="10" style="height: calc(100% - 100px)">
            <el-col :span="18">
                <div class="search-container" style="height: 100%">
                    <div class="ml20 mr20 mt20 mb20" style="height: 90%">
                        <el-descriptions
                            :column="column"
                            border
                            class="margin-top"
                            title="收据明细"
                        >
                            <template v-for="(item, index) in inpFeesDetailVoList">
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item ys-css" style="width: 80px;color: #1a1a1a">
                                            {{ item.classOnInpName }}
                                        </div>
                                    </template>
                                    <div style="width: 80px"> <span class="ys-css">{{
                                            item.charges != '' ? parseFloat(item.charges).toFixed(2) : ''
                                        }}</span><span v-if="item.charges != ''">元</span>
                                    </div>
                                </el-descriptions-item>
                            </template>
                        </el-descriptions>
                    </div>
                    <div style="position: absolute; left: 20px;">
                        <span>
                        合计：<span class="ys-css span-font">{{ sumCosts }}</span>元
                    </span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="search-container" style="height: 100%">
                    <div class="ml10 mr10 mt20">
                        <el-descriptions
                            :column="1"
                            border
                            class="margin-top"
                            title="支付方式"
                        >
                            <template v-for="(item, index) in paymentsMoneyVoList">
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item ys-css" style="width: 80px">
                                            {{ item.moneyTypeName }}
                                        </div>
                                    </template>
                                    <div style="width: 100px">  <span class="ys-css">{{
                                            item.paymentAmount != '' ? parseFloat(0 - item.paymentAmount + '').toFixed(2) : ''
                                        }}</span>元
                                    </div>
                                </el-descriptions-item>
                            </template>
                        </el-descriptions>
                    </div>
                </div>
                <el-button class="ml10" plain style="position: absolute; bottom: 10px; right: 20px" type="danger"
                           @click="confirmCancellationFun">
                    <svg-icon class="mr5" icon-class="chargeOk"/>
                    确认取消
                </el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import {useUserStoreHook} from "@/store/modules/user.ts";
import {useDictStoreHook} from "@/store/modules/dict.ts";
import {confirmCancellation, listInpFeesMasterToFeesNo} from "@/api/inpFees/inpFeesMaster.ts";
import {ElMessage} from "element-plus";
import {ipSettlementUndo} from "@/api/msip/ipSetl.ts";

const useUserStore = useUserStoreHook();
const dictStore = useDictStoreHook();
let dictDataMap = ref(
    dictStore.isTypeGetData(
        "patient_medical_source",
        "medical_insurance_type",
        "sys_user_sex",
        "medical_read_card_type",
        "outp_settlement_business_type_dict",
        "insurance_type",
        "pat_prepayment_type",
        "pay_way_dict"
    )
);
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
const queryParams = ref<any>({
    orgId: userInfo.orgId
})
const inpFeesDetailVoList = ref<any>([])
const paymentsMoneyVoList = ref<any>([])
const isNotMedical = ref(true)
// 左侧收据明细每行显示的个数
const column = ref(5)
// 合计金额
const sumCosts = ref<number>(0)

function feesNoSelectClick() {
    const param = {
        orgId: queryParams.value.orgId,
        feesNo: queryParams.value.feesNo
    }
    listInpFeesMasterToFeesNo(param).then((res: any) => {
        queryParams.value = res.data.patVisitVo
        queryParams.value.feesNo = param.feesNo
        queryParams.value.inpFeesMasterId = res.data.inpFeesMasterId
        queryParams.value.paymentsAmountIds = res.data.paymentsAmountIds
        queryParams.value.ybSerialNo = res.data.ybSerialNo
        queryParams.value.ybSerialData = res.data.ybSerialData
        sumCosts.value = res.data.charges
        let thisInpFeesDetailVoList = res.data.inpFeesDetailVoList
        paymentsMoneyVoList.value = res.data.paymentsMoneyVoList
        const listSize = thisInpFeesDetailVoList.length
        const remainder = listSize % column.value as number
        if (remainder === 0) {
            inpFeesDetailVoList.value = thisInpFeesDetailVoList
        } else {
            const replenishment = column.value - remainder as number
            for (let i = 1; i <= replenishment; i++) {
                thisInpFeesDetailVoList.push({"classOnInpName": "", "charges": ""})
            }
            inpFeesDetailVoList.value = thisInpFeesDetailVoList;
        }
    })
}

/**
 * 确认退费
 */
function confirmCancellationFun() {
    if (!queryParams.value.feesNo) {
        return ElMessage.error(
            "请先选择需要取消结算的患者或者输入结算序号"
        );
    }
  if (queryParams.value.ybSerialNo) {
    ElMessageBox.confirm("确定要医保退费吗？", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      let param = {
        pays: paymentsMoneyVoList.value,//结算方式
        inpFeesMasterId: queryParams.value.inpFeesMasterId, // his结算id
        his_mdtrt_id: queryParams.value.visitId,//HIS ID
        his_serial_no: queryParams.value.feesNo,//his原收据号
        his_user_id: userInfo.userId,//HIS 用户ID
        org_id: userInfo.orgId,//HIS 机构ID
      };
      ipSettlementUndo(param).then((res: resType) => {
        if (res && res.code === 200) {
          // 清空患者信息
          hospitalNoClear()
          ElMessage.success("取消结算成功");
        } else {
          return ElMessage.error(res.msg)
        }
      });
    });
  }else{
    ElMessageBox.confirm("确定要取消结算吗？", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      let submitForm: any = {};
      submitForm.payWayInfoList = paymentsMoneyVoList.value;
      submitForm.payWayInfoList.forEach((item: any) => {
        item.paymentAmount = 0 - item.paymentAmount
      })
      submitForm.inpFeesMasterBo = {
        orgId: queryParams.value.orgId,
        visitId: queryParams.value.visitId,
        patientId: queryParams.value.patientId,
        ybSerialType: queryParams.value.ybSerialType,
        canBaoType: queryParams.value.canBaoType,
        paymentsAmountIds: queryParams.value.paymentsAmountIds,
        inpFeesMasterId: queryParams.value.inpFeesMasterId
      };
      submitForm.orgId = queryParams.value.orgId
      confirmCancellation(submitForm).then(() => {
        // 清空患者信息
        hospitalNoClear()
        ElMessage.success("取消结算成功");
      });
    });
  }
}

/**
 * 住院号清空事件
 */
function hospitalNoClear() {
    queryParams.value = {
        orgId: userInfo.orgId
    }
    inpFeesDetailVoList.value = []
    paymentsMoneyVoList.value = []
}
</script>


<style scoped>
:deep(.el-divider--horizontal) {
    margin: 10px 0 10px 0;
}

:deep(.el-form-item) {
    margin-bottom: 0px !important;
}

.search-container {
    padding: 0;
}

/* 调整患者信息整体布局 */
.patient-info-container {
  :deep(.el-form-item__label) {
    font-size: 13px !important;
    color: #333 !important;
  }
  :deep(.el-form-item__content) {
    font-size: 14px !important;
    color: #666 !important;
  }

  /* 特别设置第一行的顶部间距 */
  :deep(.el-row:first-child) {
    margin-top: 15px;  /* 首行顶部间距 */
  }

  /* 调整表单项标签和内容的垂直间距 */
  :deep(.el-form-item) {
    margin-bottom: 4px;  /* 表单项底部间距 */
    display: flex;
    align-items: center;
    height: 30px;  /* 统一行高 */
  }

  /* 特别处理最后一行的底部间距 */
  :deep(.el-row:last-child) {
    margin-bottom: 15px;  /* 最后一行底部留白 */
  }

  /* 保持输入框和按钮的垂直居中 */
  :deep(.el-input-group) {
    display: flex;
    align-items: center;
  }
}
</style>
